<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/10
  Time: 10:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>增加一个商品</title>

    <link rel="stylesheet" href="/kindeditor-4.1.7/themes/default/default.css" />
    <link rel="stylesheet" href="/kindeditor-4.1.7/plugins/code/prettify.css" />
    <script charset="utf-8" src="/kindeditor-4.1.7/kindeditor.js"></script>
    <script charset="utf-8" src="/kindeditor-4.1.7/lang/zh_CN.js"></script>
    <script charset="utf-8" src="/kindeditor-4.1.7/plugins/code/prettify.js"></script>

    <script type="text/javascript" src="/js/jquery.1.9.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
</head>
<body>
<div id="tree1" style="display: none"></div>

<!--  Add  Content Form begin -->
<div id="itemFormDiv">
    <form class="layui-form"  style="margin: 20px 10px"  id="itemAddForm" >
        <div class="layui-form-item">
            <label class="layui-form-label">商品类型名称</label>
            <div class="layui-input-block">
                <button class="layui-btn" id="openBtn">打开</button><input type="hidden" class="layui-input" name="cid" id="cid"/>
                <span id="cname"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">卖点</label>
            <div class="layui-input-block">
                <input type="text" name="sellPoint" required  lay-verify="required" placeholder="请输入卖点" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存数量</label>
            <div class="layui-input-block">
                <input type="text" name="num" required  lay-verify="required" placeholder="请输入库存数量" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">条形码</label>
            <div class="layui-input-block">
                <input type="text" name="barcode" required  lay-verify="required" placeholder="请输入条形码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片[4张]</label>
            <div class="layui-input-inline">
                 <button type="button" class="layui-btn" id="drapUpload">
                     <i class="layui-icon">&#xe67c;</i>上传图片
                  </button>
                <button type="button" class="layui-btn" id="doUpload">上传</button>
            </div>
            <div id="div_prev" class="layui-input-inline"></div>
            <input type="hidden" name="image" id="image"/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-block">
                <textarea name="content1" cols="100" rows="8" style="width:700px;height:200px"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="itemAddFormFilter">增加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    var resultData = new Array();
    layui.use(['form','upload','layer','tree'],function () {
        var form = layui.form;
        var upload=layui.upload;
        var layer=layui.layer;
        var tree=layui.tree;

        //1.显示树节点,没有数据源
        var treeInst= tree.render({
            elem:'#tree1',
            data:[],
            click: function(obj) {
                //是商品分类的编号
                var id=obj.data.id;
                var title=obj.data.title;
                //赋值
                $("#cid").val(id);
                $("#cname").text(title);
                layer.closeAll();
            }
        });
        //2.向服务器发请求取原始数据{id,title,pid}
        $.ajax({
            url:'itemCat/list',
            type:'post',
            dataType:'json',
            success:function (resp) {//[{id:101,title:'abc',pid:0]
                fn(resp);//对原始数据处理
                treeInst.reload({
                    data:resultObj//将处理后的结果赋值的data[数据源]
                })
            }

        })
        var resultObj=[];
        function fn(jsonData) {
            //取得顶级的数据
            for(var i=0;i<jsonData.length;i++){
                if(jsonData[i].pid==0){
                    resultObj.push(jsonData[i]);
                }
            }
            getChildren(resultObj, jsonData)
        }

        function getChildren(nodeList, jsonData) {
            nodeList.forEach(function(elemet, index) {
                elemet.children = jsonData.filter(function(item, indexI) {
                    return item.pid === elemet.id
                })
                if(elemet.children.length > 0) {
                    getChildren(elemet.children, jsonData)
                }
            })
        }

        //4.打树节点
        $("#openBtn").click(function () {
            layer.open({
                type:1,
                title:'选择分类',
                area:['500px','400px'],
                content:$("#tree1")
            });
        });


        //完成多图片上传
        var url = '/uploadFile';
        var uploadInst = upload.render({
            elem: '#drapUpload',
            url: url,
            accept: 'file',
            size: 1000 * 1024, //限制文件大小，单位 KB
            multiple: true, //允许多文件上传
            auto: false, //选完文件后不要自动上传
            bindAction: '#doUpload', //指定一个按钮触发上传
            choose: function (obj) {
                var files = this.files = obj.pushFile();//将每次选择的文件追加到文件队列
                //图像预览，如果是多文件，会逐个添加。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    if (files.size > 0 && $('#div_prev').find('img').length === 0) {
                        $('#div_prev').empty();
                    }
                    // 添加图片 ImgPreview-预览的dom元素的id
                    $('#div_prev').append('<div class="image-container"  id="container'+index+'">'
                        + '<div style="dispaly:inline-block" class="delete-css">'
                        + '<button id="upload_img_'+index+'" class="layui-btn layui-btn-danger layui-btn-xs">删除</button></div>'
                        + '<img id="showImg'+index+'" style="width: 120px;height: 68px; margin:0px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
                    //删除某图片
                    $("#upload_img_" + index).bind('click', function () {
                        delete files[index];
                        $("#container"+index).remove();
                    });

                    //某图片放大预览
                    $("#showImg"+index).bind('click',function () {
                        var width = $("#showImg"+index).width();
                        var height = $("#showImg"+index).height();
                        var scaleWH = width/height;
                        var bigH = 600;
                        var bigW = scaleWH*bigH;
                        if(bigW>900){
                            bigW = 900;
                            bigH = bigW/scaleWH;
                        }

                        // 放大预览图片
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 1,
                            shadeClose: true,
                            area: [600 + 'px', 300 + 'px'], //宽高
                            content: "<img width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
                        });
                    });
                });

            },
            before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
            },
            done: function (res, index, upload) {
                layer.closeAll('loading');
                var data = res.data;
                if (res.code == 0) {
                    for (var i = 0; i < data.length; i++) {
                        resultData[resultData.length + i] = data[i];
                        //console.info(data[i])
                    }
                }

            },
            allDone: function(obj){ //当文件全部被提交后，才触发
                layer.msg('上传成功');
                //console.info(resultData.join(","))
                $("#image").val(resultData.join(","));
                console.info(resultData.join(","))

            }
            ,error: function () {
                layer.msg('上传失败');
                layer.closeAll('loading');
            }

        });

        //提交表单
        form.on('submit(itemAddFormFilter)',function (data) {
            $.ajax({
                type:"post",
                url:'item/add',//接受一个Emp类型的对象来封装表单元素中的值
                // data:"empno="+data.field.empno+"&ename="+data.field.ename+"&salary="+data.field.salary,
                data:$("#itemAddForm").serialize(),
                success:function (resp) {
                    //清空表单中的数据
                    $("#itemAddForm")[0].reset();
                    layer.msg("增加成功!")
                },
                dataType:"json"
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });
</script>

<script type="text/javascript">

  /*  KindEditor.ready(function(K) {
        var editor1 = K.create('textarea[name="content1"]', {
            cssPath : '/kindeditor-4.1.7/plugins/code/prettify.css',
            uploadJson : '/kindeditor-4.1.7/jsp/upload_json.jsp',
            fileManagerJson : '/kindeditor-4.1.7/jsp/file_manager_json.jsp',
            allowFileManager : true,
            afterCreate : function() {
                var self = this;
                K.ctrl(document, 13, function() {
                    self.sync();
                    document.forms['example'].submit();
                });
                K.ctrl(self.edit.doc, 13, function() {
                    self.sync();
                    document.forms['example'].submit();
                });
            }
        });
        prettyPrint();
    });
*/
</script>
</body>
</html>
